<template>
  <div>
    <el-dialog ref="dislogRef" :visible.sync="dialogVisible" lock-scroll width="60%">
      <div slot="title" class="header_title">
        <span class="title_span">{{ toJobRole == 'role' ? '角色' : '职务岗位' }}</span>
      </div>
      <div class="content_div">
        <div class="info_table">
          <div class="div_table">
            <div class="table_content">
              <el-table
                :data="tableData"
                ref="tableRef"
                @selection-change="handleSelectionChange"
                @row-click="onClickRow"
                :row-class-name="tableRowClassName"
                height="100%"
              >
                <el-table-column type="selection" width="50" v-if="toJobRole == 'role'"></el-table-column>
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column property="name" label="名称"></el-table-column>
                <el-table-column property="orderCode" label="排序码"></el-table-column>
                <el-table-column property="pinYinCode" label="拼音码"></el-table-column>
                <el-table-column property="backup" label="备注"></el-table-column>
                <el-table-column label="操作" :resizable="false">
                  <template slot-scope="scope">
                    <div v-if="toJobRole == 'role' || selectRow.id == scope.row.id">
                      <i @click.stop="onAddRow(scope.row)" class="el-icon-circle-plus-outline"></i>
                      <i @click.stop="onEditRow(scope.row)" class="el-icon-edit-outline"></i>
                      <i @click.stop="onDeleteRow(scope.row)" class="el-icon-delete"></i>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="info_button">
          <el-button @click="onAddRow">新增</el-button>
          <div>
            <el-button type="primary" @click="onSelectRow">选择</el-button>
            <el-button @click="onCancelRow">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 职务/角色新增 -->
    <DialogJobRoleAdd
      ref="jobRoleAddRef"
      :toJobRoleData="toJobRoleData"
      @onAddSubmit="onAddJobRole"
    ></DialogJobRoleAdd>
    <!-- 提醒弹框 -->
    <PopupReminder ref="reminderRef" :tipsData="tipsData" @onConfirm="onYes"></PopupReminder>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DialogJobRoleAdd from './dialogJobRoleAdd'
import PopupReminder from './popupReminder'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { handleIsBaseVersion } from '@/utils'
export default {
  name: 'BasicInformation',
  computed: {
    ...mapGetters(['name']),
  },
  components: {
    DialogJobRoleAdd,
    PopupReminder,
  },
  props: {
    toJobRole: String,
  },
  data () {
    return {
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      toJobRoleData: {
        addOrEdit: '',
        jobOrRole: '',
        list: '',
      },
      nowId: '',
      selectRow: {}, //当前选择的数据
      selectRowArr: [],
      tableData: [],
      // 未过滤角色的数据
      allData: [],
      batchData: [],
      dialogVisible: false, // 新增弹框
    }
  },
  watch: {
    toJobRole (val) {
      //this.getData()
    },
    dialogVisible (val) {
      if (val == true) {
        this.getData()
      }
    }
  },
  computed: {
    isBaseVersion() {
      return handleIsBaseVersion()
    },
  },
  methods: {
    tableRowClassName ({ row }) {
      if (this.toJobRole == 'role') {
        this.batchData.forEach((item) => {
          if (row.id === item.id) {
            return 'select_row'
          }
        })
      } else {
        if (row.id === this.selectRow.id) {
          return 'select_row'
        }
      }
    },
    // 获取新增职务/角色的值
    onAddJobRole (data, type) {
      this.tableData = []
      this.allData = []
      this.getData()
      this.$emit('onAddSubmit', data, type)
    },
    getData () {
      if (this.toJobRole == 'role') {
        getAction('/role/xghAccountBookRole/list', {}).then((res) => {
          if (res.code === 200) {
            let list = res.result || []
            this.tableData = []
            this.allData = []
            list.forEach(item => {
              item['name'] = item.roleName
              this.allData.push(item)
              if (item.roleCode != 'admin') {
                this.tableData.push(item)
              }
            })
            // this.tableData = res.result
            // this.tableData.forEach((item) => {
            //   item['name'] = item.roleName
            // })
          }
        })
      } else {
        getAction('/post/xghAccountBookPost/getByAccountBookId', {}).then((res) => {
          if (res.code === 200) {
            this.tableData = res.result
          }
        })
      }
    },
    onAddRow (row) {
      let obj = {}
      for (const key in row) {
        obj[key] = ''
      }
      this.toJobRoleData = {
        addOrEdit: 'add',
        jobOrRole: this.toJobRole,
        list: obj,
      }
      this.$refs.jobRoleAddRef.newData = obj
      this.$refs.jobRoleAddRef.dialogVisible = true
    },
    onEditRow (row) {
      let str = JSON.stringify(row)
      let arr = JSON.parse(str)
      this.toJobRoleData = {
        addOrEdit: 'edit',
        jobOrRole: this.toJobRole,
        list: arr,
      }
      this.$refs.jobRoleAddRef.newData = arr
      this.$refs.jobRoleAddRef.dialogVisible = true
    },
    onDeleteRow (row) {
      this.nowId = row.id
      this.tipsData.tipsState = 'delete'
      this.tipsData.tipsWords = '是否确认删除?'
      this.tipsData.tipsMark = 'onDeleteRow'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 提醒弹框确认后操作
    onYes (mark) {
      if (mark == 'onDeleteRow') {
        let data = {
          id: this.nowId,
        }
        if (this.toJobRole == 'role') {
          postAction('/role/xghAccountBookRole/delete', data).then((res) => {
            if (res.code === 200) {
              this.$elMessage.success(res.message)
              this.getData()
              this.$emit('onAddSubmit', '', this.toJobRole)
            } else {
              this.$elMessage.error(res.message)
            }
          })
        } else {
          postAction('/post/xghAccountBookPost/delPost', data).then((res) => {
            if (res.code === 200) {
              this.$elMessage.success(res.message)
              this.getData()
            } else {
              this.$elMessage.error(res.message)
            }
          })
        }
      }
    },
    // 选中当前行
    onClickRow (row) {
      if (this.toJobRole == 'role') {
        this.selectRowArr.push(row)
        this.$refs.tableRef.toggleRowSelection(row)
      } else {
        this.selectRow = row
      }
    },
    // 触发表格多选按钮
    handleSelectionChange (val) {
      this.batchData = val
      this.selectRow = val
    },
    // 选中后传递给父组件
    onSelectRow () {
      if (this.toJobRole == 'role') {
        if (this.batchData.length == 0) {
          this.$elMessage.warning('请选择一条信息')
          return
        }
        if (this.isBaseVersion) {
          // 必用版需要将管理员角色加入到选中数据中 
          let adminRole = this.allData.find(item => item.roleCode === 'admin')
          if (adminRole && !this.batchData.find(item => item.roleCode === 'admin')) {
            this.batchData.push(adminRole)
          }
        }
        this.$emit('onSelect', this.batchData, this.toJobRole)
      } else {
        var objStr = JSON.stringify(this.selectRow)
        if (objStr == '{}') {
          this.$elMessage.warning('请选择一条信息')
          return
        }
        this.$emit('onSelect', this.selectRow, this.toJobRole)
      }
      this.dialogVisible = false
      this.$refs.tableRef.clearSelection()
      this.selectRow = {}
    },
    onCancelRow () {
      if (this.toJobRole == 'role') {
        this.$emit('onCancel', this.batchData)
      } else {
        this.$emit('onCancel', this.selectRow)
      }

      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.content_div {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0.187512rem 0.281268rem;
  .info_table {
    width: 100%;
    height: 50vh;
    display: flex;
    .div_table {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .table_content {
        height: 100%;
        ::v-deep .el-table {
          border: 1px solid #e3e3e3;
          box-sizing: border-box;
          th,
          td {
            padding: 0;
            color: #666;
            box-sizing: border-box;
            border-right: 1px solid #e3e3e3;
            .cell {
              height: 33px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
            }
            &:last-child {
              border-right: none;
            }
          }
          th {
            .cell {
              background: #ededed;
              justify-content: center;
            }
          }
          .el-table__body tr:hover > td {
            background: #e3f6ff;
          }
          .el-table__body tr:focus > td {
            background: #e3f6ff;
          }
          .el-table__footer-wrapper {
            td {
              background: #f4f4f4;
              border: none;
            }
          }
          .is-checked,
          .is-indeterminate {
            .el-checkbox__inner {
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
          .el-icon-circle-plus-outline {
            font-size: 0.262516rem;
            color: #1b93f9;
            cursor: pointer;
          }
          .el-icon-edit-outline {
            font-size: 0.262516rem;
            color: #1b93f9;
            margin: 0 0.150009rem;
            cursor: pointer;
          }
          .el-icon-delete {
            font-size: 0.262516rem;
            color: #ff2626;
            cursor: pointer;
          }
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: #e5e5e5;
          }
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            background-color: #c9c9c9;
          }
        }
      }
      .total_record {
        width: 100%;
        height: 0.562535rem;
        box-sizing: border-box;
        padding: 0 0.281268rem;
        border: 1px solid #e3e3e3;
        border-top: none;
        background: #f4f4f4;
        display: flex;
        p {
          margin: 0;
          line-height: 0.562535rem;
          padding-right: 0.281268rem;
          font-size: 0.225rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }
    }
  }
  .info_button {
    width: 100%;
    height: 0.750047rem;
    height: 0.937559rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-button {
      width: 1.12507rem;
      height: 0.562535rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.093756rem;
    }
    > div {
      display: flex;
    }
  }
}
::v-deep .select_row {
  background-color: #e3f6ff !important;
}
</style>